<template>
  <div>
    <vueButton
      v-bind="$attrs"
      v-on="$listeners"
      :btnRef="buttonRef"
      :which="which"
      :isCustomData="configDefault.isCustomData"
      :customData="configDefault.options"
      :textAlign="configDefault.textAlign"
      :size="configDefault.size"
      :loading="configDefault.loading"
      :icon="configDefault.icon"
      :round="configDefault.round"
      :plain="configDefault.plain"
      :type="configDefault.type"
      :disabledTip="configDefault.disabledTip"
      @buttonCallback="buttonClick"
    ></vueButton>
  </div>
</template>

<script>
import vueButton from "@/components/vueButton/button";
import XEUtils from "xe-utils";
export default {
  name: "myButton",
  props: {
    //自定义按钮ref
    buttonRef: {
      type: String,
      default() {
        return "vueButton";
      },
    },
    // model: {
    //   // 当前组件绑定值
    //   type: [String, Number, Boolean, Array],
    //   require: true,
    // },
    modelKey: {
      //当前绑定值key，可以用于formData中获取到当前组件渲染配置items
      type: String,
      default() {
        return "";
      },
    },
    fromSource: {
      //用于formData中获取到当前组件渲染配置items
      type: [Array, String],
      default() {
        return "";
      },
    },
    which: {
      //第几组按钮
      type: [String, Number],
      default() {
        return 1;
      },
    },
    // disabled: {
    //   // 当前组件是否禁用
    //   type: Boolean,
    //   default() {
    //     return false;
    //   },
    // },
    config: {
      //私有配置数据
      type: [String, Object],
      require: true,
    },
    formConfigData: {
      //配置数据
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    vueButton,
  },
  data() {
    return {
      configDefault: {
        isCustomData: true,
        options: [],
        textAlign: "textLeft",
        size: "medium",
        loading: false,
        icon: "",
        round: false,
        plain: false,
        type: "primary",
        disabledTip: true,
      },
    };
  },
  watch: {
    formConfigData: {
      handler(newVal) {
        let formConfigObj = newVal
          ? newVal[this.fromSource] || newVal[this.modelKey]
          : {};
        let publicConfigObj = newVal ? newVal["publicAttr"] : {};
        let cfg =
          this.config && XEUtils.isString(this.config)
            ? XEUtils.toStringJSON(this.config)
            : this.config || {};
        this.configDefault = XEUtils.merge(
          this.configDefault,
          publicConfigObj,
          cfg,
          formConfigObj
        );
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    buttonClick(key, btnItem) {
      this.$emit(
        "buttonClickCallback",
        this.modelKey + "_" + this.which,
        btnItem
      );
    },
  },
};
</script>

<style lang="less">
</style>



